import { HOME_URL } from "../../../../constants";
import { setTabsList } from '../../../../store/modules/tabs'
import { DownOutlined } from '@ant-design/icons';
import { Button, Dropdown, type MenuProps } from 'antd';
import { useTranslation } from 'react-i18next'
import { useDispatch } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";

const MoreButton = (props: any) => {
  const { pathname } = useLocation();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { t } = useTranslation();

  // close multipleTab
  const closeMultipleTab = (tabPath?: string) => {
    const handleTabsList = props.tabsList.filter((item: any) => {
      return item.key === tabPath || item.key === HOME_URL
    })
    dispatch(setTabsList(handleTabsList))
    if (!tabPath) {
      navigate(HOME_URL)
    }
  }

  const items: MenuProps['items'] = [
    {
      key: '1',
      label: <span>{t('tabs.closeCurrent')}</span>,
      onClick: () => props.delTabs(pathname)
    },
    {
      key: '2',
      label: <span>{t('tabs.closeOther')}</span>,
      onClick: () => closeMultipleTab(pathname)
    },
    {
      key: '3',
      label: <span>{t('tabs.closeAll')}</span>,
      onClick: () => closeMultipleTab()
    }
  ]
  
  return (
    <Dropdown menu={{ items }} arrow={true} placement="bottom" trigger={['click']}>
      <Button type="primary" className="more-button" size="small">
        {t('tabs.more')} <DownOutlined />
      </Button>
    </Dropdown>
  )
}

export default MoreButton;